<!DOCTYPE html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta charset="utf-8">
		<title>Wakeup</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">

		<link rel="stylesheet" type="text/css" href=".\css\style.css">

		<!-- detect touch devices -->
		<script type="text/javascript">
			(function(window, document, undefined) {
				var touch_cls = ("ontouchstart" in document.documentElement) ? " touch" : " notouch";
				document.documentElement.className = document.documentElement.className + touch_cls;
			}(window, document));
		</script>

		<script type="text/javascript" src=".\js\jquery\jquery-2.0.0.min.js"></script>

		<script type="text/javascript">
			$(function(){
				var canvas = document.getElementById('textureCanvas');
				var ctx = canvas.getContext('2d');

				var textToWrite = "HTML5 Rocks!";
				var textSize = 12;
				ctx.font = textSize+"px monospace"; 	// Set the font of the text before measuring the width!
				canvas.width = getPowerOfTwo(ctx.measureText(textToWrite).width);
				canvas.height = getPowerOfTwo(2*textSize);

				ctx.fillStyle = "#333333"; 	// This determines the text colour, it can take a hex value or rgba value (e.g. rgba(255,0,0,0.5))
				ctx.textAlign = "center";	// This determines the alignment of text, e.g. left, center, right
				ctx.textBaseline = "middle";	// This determines the baseline of the text, e.g. top, middle, bottom
				ctx.font = "12px monospace";	// This determines the size of the text and the font family used

				ctx.fillText("HTML5 Rocks!", canvas.width/2, canvas.height/2);


				gl = canvas.getContext("experimental-webgl");
				canvasTexture = gl.createTexture();
    			handleLoadedTexture(canvasTexture, document.getElementById('textureCanvas'));


    			gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

			    gl.bindTexture(gl.TEXTURE_2D, texture);
			    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas); // This is the important line!
			    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
			    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
			    gl.generateMipmap(gl.TEXTURE_2D);
    			gl.bindTexture(gl.TEXTURE_2D, null);


				function getPowerOfTwo(value, pow) {
					var pow = pow || 1;
					while(pow<value) {
						pow *= 2;
					}
					return pow;
				}
			});
		</script>


	</head>
	<body ontouchstart>
		<div id="app-main" class="app-main">

		<div class="sphere">
			<ul class="equations">
				<li class="equation equation1"><span>34 * 54 = </span><input type="text"></li>
				<li class="equation active-equation equation2"><span>34 * 54 = </span><input type="text"></li>
				<li class="equation equation3"><span>34 * 54 = </span><input type="text"></li>
			</ul>

			<canvas id="textureCanvas">I'm sorry your browser does not support the HTML5 canvas element.</canvas>

		</div>


		</div>
	</body>
</html>